/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


var descData = null;

var first = null;
var currentSelect = null;

function init() {
    
    UserPanel.init();
}

function UserPanel() {

}

UserPanel.data = null;

UserPanel.init = function() {
    UserPanel.getDataAndRender();
    first = true;
}

UserPanel.getDataAndRender = function() {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.data = eval("(" + ajax.xhr.responseText + ")");
        UserPanel.render();
    }

    ajax.openAndSend("GET", baseURL + "/UserPanel", true, null);
}

UserPanel.render = function () {
    var data = UserPanel.data;

    // clear
    userContainer.innerHTML = "";
    descData = data;
    for (var i = 0; i < data.length; ++i) {
        var user = data[i];
        var userElmt = document.createElement("div");
        var inner = '<img src="" alt="' + user.role + '" class="role" />\n' + '<div class="userName" onClick="DescUserPanel.render('+ i +');">' + user.userName + '</div>\n';
        if(user.role == "user") {
            inner = inner + '<div class="set_moderator" onClick="setModerator('+user.id +'); DescUserPanel.render('+ i +');">' + 'make as moderator' + '</div>\n';
        } else {
            inner = inner + '<div class="set_moderator" onClick="unSetModerator('+user.id +'); DescUserPanel.render('+ i +');">' + 'remove from moderator' + '</div>\n';
        }
        if(user.ban==0) {
            inner = inner + '<div class="ban" onClick="banUser('+user.id +'); DescUserPanel.render('+ i +');"> '+ 'ban' +'</div>\n';
        } else {
            inner = inner + '<div class="ban" onClick="unBanUser('+user.id +'); DescUserPanel.render('+ i +');"> '+ 'unban' +'</div>\n';
        }
        inner = inner + '<div class="delete" onClick="deleteUser('+user.id+');"> ' + 'delete' + '</div>\n';

        userElmt.className = "user";
        userElmt.id = "user-" + user.id;
        userElmt.innerHTML = inner;

        // Add to conatiner
        userContainer.appendChild(userElmt);
    }
    if(first==true) {
        first=false;
        currentSelect = 0;
    }
    var elmt = document.createElement("div");
    inner  = '<input type="button" value="Add User" onclick="addUser();">';
    elmt.className = "addUser";
    elmt.innerHTML = inner;
    userContainer.appendChild(elmt);
    DescUserPanel.render(currentSelect);
    userContainer.style.display = "block";
    categoryLeftContainer.style.display = "none";
    categoryRightContainer.style.display = "none";
}

function DescUserPanel() {

}

DescUserPanel.data = null;

DescUserPanel.render = function (status) {
    var user = descData[status];

    // clear
    descContainer.innerHTML = "";
    currentSelect=status;

    var userElmt = document.createElement("div");
    var inner='<div class="userName">' + user.userName + '</div>\n';
    inner=inner + '<div class="password">' + user.password + '</div> <div class="edit-password" onClick="editPassword('+user.id +');"> edit </div>\n';
    inner=inner + '<div class="email">' + user.email + '</div> <div class="edit-email" onClick="editEmail('+user.id +',\'' + user.email +'\');"> edit </div>\n';
    inner = inner + '<div class="room">' + user.max_number_room + '</div>\n' +
        '<div class="edit-room">' + '<img src="" alt="edit" onClick="editRoom('+user.id +',' + user.max_number_room +');" />' + '</div>\n ';

    userElmt.className = "desc";
    userElmt.id = "desc-" + user.id;
    userElmt.innerHTML = inner;

    // Add to conatiner
    descContainer.appendChild(userElmt);
    descContainer.style.display = "block";
}


function setModerator(id) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=setmod&id=" + id);
}

function unSetModerator(id) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=unsetmod&id=" + id);
}

function banUser(id) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=ban&id=" + id);
}

function unBanUser(id) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=unban&id=" + id);
}

function editRoom(id, max_number_room) {
    var roomNumberContainer = getElementByClass("room", document.getElementById("desc-"+id))[0];
    var editRoomSymbolContainer = getElementByClass("edit-room", document.getElementById("desc-"+id))[0];

    roomNumberContainer.innerHTML = "";
    editRoomSymbolContainer.innerHTML = "";

    var inner = '<input type="text" value="'+max_number_room+'" name="number_room" onkeypress="{if (event.keyCode==13) editRoomProcess('+id +', this.value);}"/>';
    roomNumberContainer.innerHTML = inner;
}

function editRoomProcess(id, number_room) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=setroom&id=" + id+"&room="+number_room);
}

function editEmail(id, email) {
    var container = getElementByClass("email", document.getElementById("desc-"+id))[0];
    var editContainer = getElementByClass("edit-email", document.getElementById("desc-"+id))[0];

    container.innerHTML = "";
    editContainer.innerHTML = "";

    var inner = '<input type="text" value="'+email+'" name="email" onkeypress="{if (event.keyCode==13) editEmailProcess('+id +', this.value);}"/>';
    container.innerHTML = inner;
}

function editEmailProcess(id, email) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=setemail&id=" + id+"&email="+email);
}

function editPassword(id) {
    var container = getElementByClass("password", document.getElementById("desc-"+id))[0];
    var editContainer = getElementByClass("edit-password", document.getElementById("desc-"+id))[0];

    container.innerHTML = "";
    editContainer.innerHTML = "";
    var oldPass=1;
    //var inner = '<input id="oldPass" type="text" value="old password" name="oldPass" onclick="{this.value=null;}"/>';
    var inner = '<input id="newPass" type="text" value="new password" name="newPass" onclick="{this.value=null;}" />';
    inner = inner + '<input id="confirmPass" type="text" value="confirm password" name="confirmPass" onclick="{this.value=null;}" onkeypress="{if (event.keyCode==13) parseInputPassword('+id +');}"/>';
    container.innerHTML = inner;
}

function parseInputPassword(id) {
    var newPass = document.getElementById("newPass").value;
    var confirmPass = document.getElementById("confirmPass").value;

    editPasswordProcess(id,newPass,confirmPass);
}

function editPasswordProcess(id,newPass, confirmPass) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=setpassword&id=" + id+"&new="+newPass+"&confirm="+confirmPass);
}

function addUser() {
    descContainer.innerHTML = "";

    var inner = '<input id="newUser" type="text" value="user name" name="newUser" onclick="{this.value=null;}" />';
    inner = inner + '<input id="newPass" type="text" value="new password" name="newPass" onclick="{this.value=null;}" />';
    inner = inner + '<input id="confirmPass" type="text" value="confirm password" name="confirmPass" onclick="{this.value=null;}"/>';
    inner = inner + '<input id="newEmail" type="text" value="email" name="newEmail" onclick="{this.value=null;}" onkeypress="{if (event.keyCode==13) parseInputUser();}"/>';
    descContainer.innerHTML = inner;
}

function parseInputUser() {
    var newUser = document.getElementById("newUser").value;
    var newPass = document.getElementById("newPass").value;
    var confirmPass = document.getElementById("confirmPass").value;
    var newEmail = document.getElementById("newEmail").value;
    
    addUserProcess(newUser, newPass, confirmPass, newEmail);
}

function addUserProcess(newUser, newPass, confirmPass, newEmail) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=adduser&username=" + newUser+"&pass="+newPass+"&confirm="+confirmPass+"&email="+newEmail);
}

function deleteUser(id) {
    var ajax = new Ajax();

    ajax.onLoadSuccess = function() {
        UserPanel.getDataAndRender();
        first = true;
    }

    // Send
    ajax.openAndSend("POST", baseURL + "/AdminUser", true, "action=deluser&id=" + id);
}